<script setup lang="ts" name="BigScreenIndex">
import usePublic from './hooks/usePublic'
import useGroup from './hooks/useGroup'
import useList from './hooks/useList'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'

import BigScreenGroupAddEdit from './components/BigScreenGroupAddEdit.vue'

const router = useRouter()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

const BigScreenGroupAddEditRef = ref(null)
const treeRef = ref(null) // 树结构

const { info } = usePublic()
const { handleSizeChange, handleCurrentChange, getBigScreenList, addBigScreen, editBigScreen, removeBigScreen, previewBigScreen, releaseBigScreen } = useList(info, router)
const { getBigScreenGroupData, treeNodeClick, filterTreeList, filterTreeNodeHandler, nodeExpandChange, nodeCollapseChange, addGroup, editGroup, deleteGroup } = useGroup(info, treeRef, BigScreenGroupAddEditRef)

const initData = async () => {
  await getBigScreenGroupData()
  await getBigScreenList()
}
onMounted(() => {
  initData()
})
</script>

<template>
  <div class="page-root">
    <div class="tree-pane">
      <div class="tree-header">
        <div class="title-button">
          <h2>大屏分组</h2>
          <el-button link type="success" icon="Plus" @click="addGroup">新增</el-button>
        </div>
        <el-input v-model="info.group.search.name" @input="filterTreeList" placeholder="分组名称" clearable>
          <template #prefix>
            <svg-icon icon="ep:search"></svg-icon>
          </template>
        </el-input>
      </div>
      <div class="tree-body">
        <el-scrollbar always>
          <el-tree
            ref="treeRef"
            class="tree-level"
            :data="info.group.data.list"
            :props="{ label: 'title' }"
            node-key="id"
            :filter-node-method="filterTreeNodeHandler"
            auto-expand-parent
            :expand-on-click-node="false"
            :check-on-click-node="false"
            :default-expanded-keys="info.group.data.expandNodes"
            @node-expand="nodeExpandChange"
            @node-collapse="nodeCollapseChange"
            check-strictly>
            <template #default="{ node, data }">
              <span class="item-tree-node" @click="treeNodeClick(data)">
                <span>{{ node.label }}</span>
                <template v-for="item in data.level">
                  <span v-if="!data.hideLine.includes(item)" :key="item.value" :class="['item-tree-node-line-vertical', data.isLast && item == data.level ? 'is-last' : '', data.isFirst && data.level === 1 ? 'is-first' : '']" :style="{ left: 18 * (item - 1) + 12 + 'px' }"></span>
                </template>
                <span v-if="data.children.length > 0 && info.group.data.expandNodes.includes(data.id)" class="item-tree-node-line-vertical halfway" :style="{ left: 18 * (data.level - 1) + 17 + 12 + 1 + 'px' }"></span>
                <span class="item-tree-node-line-horizontal" :style="{ left: 18 * (data.level - 1) + 12 + 1 + 'px' }"></span>
              </span>
              <el-button v-if="data.id !== 0" link type="primary" icon="Edit" title="编辑" @click="editGroup(data)"></el-button>
              <el-button v-if="data.id !== 0" link type="danger" icon="Delete" title="删除" @click="deleteGroup(data)"></el-button>
            </template>
          </el-tree>
        </el-scrollbar>
      </div>
    </div>
    <div class="list-pane">
      <div class="breadcrumb-search">
        <div class="breadcrumb-pane">
          <el-breadcrumb separator="/">
            <template v-for="(item, index) in info.source.breadcrumbList" :key="index">
              <el-breadcrumb-item v-if="index < info.source.breadcrumbList.length - 1" @click="treeNodeClick(item)">
                {{
                  item.title }}
              </el-breadcrumb-item>
              <el-breadcrumb-item v-else class="is-leaf">{{ item.title }}</el-breadcrumb-item>
            </template>
          </el-breadcrumb>
        </div>
        <div class="search-pane">
          <el-input v-model="info.group.search.name" placeholder="大屏名称" clearable>
            <template #prefix>
              <svg-icon icon="ep:search"></svg-icon>
            </template>
          </el-input>
          <el-button type="primary" icon="Search" @click="getBigScreenList()">搜索</el-button>
          <el-button type="success" icon="Plus" @click="addBigScreen">新建</el-button>
        </div>
      </div>
      <div class="list-body">
        <el-scrollbar>
          <div class="template-list">
            <div class="item-template" v-for="item, index in info.source.data.list" :key="index">
              <el-card shadow="hover">
                <div class="content">
                  <div class="top">
                    <span class="btn danger" title="删除" @click="removeBigScreen(item)"><svg-icon icon="ri:close-line"></svg-icon></span>
                    <span class="btn warning" title="预览" @click="previewBigScreen(item)"><svg-icon icon="ri:computer-line"></svg-icon></span>
                    <span class="btn success" title="编辑" @click="editBigScreen(item)"><svg-icon icon="ri:auction-line"></svg-icon></span>
                  </div>
                  <div class="image-wrap">
                    <el-image :src="item.src" :preview-teleported="true" :preview-src-list="info.source.data.imagePreviewList" :initial-index="index"></el-image>
                  </div>
                </div>
                <div class="title-button">
                  <p>{{ item.title }}</p>
                  <div class="button">
                    <el-tooltip content="编辑" :effect="systemConfig.isLight ? 'light' : 'dark'" placement="bottom">
                      <el-button @click="editBigScreen(item)"><svg-icon icon="ri:auction-line"></svg-icon></el-button>
                    </el-tooltip>
                    <el-popover placement="bottom" :width="item.status ? 130 : 100" trigger="hover">
                      <template #reference>
                        <el-badge is-dot :type="item.status ? 'success' : 'warning'">
                          <el-button><svg-icon icon="ep:more"></svg-icon></el-button>
                        </el-badge>
                      </template>
                      <div class="button-list">
                        <el-button link @click="previewBigScreen(item)">
                          <svg-icon icon="ri:computer-line"></svg-icon>
                          <span>预览</span>
                        </el-button>
                        <el-badge is-dot :type="item.status ? 'success' : 'warning'">
                          <el-button link @click="releaseBigScreen(item)">
                            <svg-icon icon="ri:send-plane-line"></svg-icon>
                            <span>{{ item.status ? '取消' : '' }}发布</span>
                          </el-button>
                        </el-badge>
                        <el-button link @click="removeBigScreen(item)">
                          <svg-icon icon="ri:delete-bin-line"></svg-icon>
                          <span>删除</span>
                        </el-button>
                      </div>
                    </el-popover>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <el-pagination
        v-if="info.source.data.total > 0"
        v-model:currentPage="info.source.search.pageIndex"
        v-model:page-size="info.source.search.pageSize"
        :page-sizes="[20, 40, 80, 120]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="info.source.data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <BigScreenGroupAddEdit ref="BigScreenGroupAddEditRef" :group-list="info.group.data.list" @save="getBigScreenGroupData"></BigScreenGroupAddEdit>
  </div>
</template>

<style scoped lang="scss">
.page-root {
  display: flex;
  flex: 1;
  overflow: hidden;

  .tree-pane {
    display: flex;
    flex-direction: column;
    width: 300px;
    padding: var(--el-space);

    .tree-header {
      padding-bottom: var(--el-space);

      .title-button {
        display: flex;
        align-items: center;
        height: 32px;
        margin-bottom: 10px;

        h2 {
          position: relative;
          flex: 1;
          padding-left: 12px;
          color: var(--el-color-primary);
          font-weight: bold;

          &::before {
            position: absolute;
            top: 50%;
            left: 0;
            display: block;
            width: 4px;
            height: 16px;
            margin-top: -8px;
            background-color: var(--el-color-primary);
            content: '';
          }
        }
      }
    }

    .tree-body {
      position: relative;
      flex: 1;
      overflow: hidden;

      .el-scrollbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        :deep(.el-scrollbar__wrap) {
          overflow-x: hidden;
        }

        .el-tree {
          background: transparent;

          :deep(.el-tree-node__content) {
            height: 32px;
            padding-right: 12px;

            &:hover {
              .el-button {
                display: inline-flex;
              }
            }

            .el-button {
              display: none;
              margin: 6px;
            }
          }
        }
      }
    }
  }

  .list-pane {
    display: flex;
    flex: 1;
    flex-direction: column;

    .breadcrumb-search {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--el-space) var(--el-space) var(--el-space) 0;

      .breadcrumb-pane {
        position: relative;
        padding-left: 12px;

        &::before {
          position: absolute;
          top: 50%;
          left: 0;
          display: block;
          width: 4px;
          height: 16px;
          margin-top: -8px;
          background-color: var(--el-color-primary);
          content: '';
        }

        .el-breadcrumb {
          :deep(.el-breadcrumb__item) {
            .el-breadcrumb__inner {
              color: var(--el-color-primary);
              cursor: pointer;

              &:hover {
                color: var(--el-color-primary-light-3);
              }
            }

            &.is-leaf {
              .el-breadcrumb__inner {
                color: var(--el-text-color-regular);
                cursor: text;
              }
            }
          }
        }
      }

      .search-pane {
        display: flex;

        .el-input {
          margin-right: 12px;
        }
      }
    }

    .list-body {
      position: relative;
      flex: 1;
      overflow: hidden;

      .el-scrollbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        :deep(.el-scrollbar__wrap) {
          overflow-x: hidden;
        }
      }

      .template-list {
        margin-left: -20px;
        padding: 0 10px;

        .item-template {
          float: left;
          width: 25%;
          padding: 0 10px 20px;

          :deep(.el-card__body) {
            padding: 0;
          }

          .content {
            position: relative;
            padding: 32px 20px 16px;

            .top {
              position: absolute;
              top: 10px;
              left: 10px;
              display: flex;

              &:hover {
                .btn {
                  .el-icon {
                    opacity: 1;
                  }
                }
              }

              .btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 14px;
                height: 14px;
                margin: 0 4px;
                border-radius: 100%;
                cursor: pointer;

                .el-icon {
                  color: black;
                  font-size: 10px !important;
                  opacity: 0;
                  transition: all 0.3s;
                }

                &.danger {
                  background-color: var(--el-color-danger);
                }

                &.warning {
                  background-color: var(--el-color-warning);
                }

                &.success {
                  background-color: var(--el-color-success);
                }
              }
            }
          }

          .image-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 180px;
            overflow: hidden;
            text-align: center;
            background-color: var(--el-fill-color-blank);
            background-image: linear-gradient(var(--el-fill-color-blank) 12px, transparent 0), linear-gradient(90deg, transparent 12px, var(--el-text-color-placeholder) 0);
            background-size: 13px 13px, 13px 13px;
          }

          .el-image {
            display: inline-flex;
            height: 180px;

            :deep(.el-image--inner) {
              height: 180px;
              object-fit: contain;
            }
          }

          .title-button {
            display: flex;
            align-items: center;
            padding: 12px;
            background-color: var(--el-fill-color);

            p {
              flex: 1;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              word-break: break-all;
            }

            .button {

              >.el-button,
              >.el-badge {
                margin-left: 12px;
              }
            }
          }
        }
      }
    }
  }
}

.button-list {

  .el-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
    padding: 8px 10px;

    &:hover {
      color: var(--el-text-color-regular);
      background-color: var(--el-fill-color);
    }
  }
}

.el-pagination {
  align-items: center;
  justify-content: flex-end;
  margin: var(--el-space) 0;
  padding-right: var(--el-space);
}
</style>
